<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../CSS/reset.css">
    <style>
        /* 
        浮动只能在父元素内浮动
        如果浮动元素上边是一个块元素，则浮动无法上移

        脱离文档流的特点：不区分行内和块元素了，都是行内块元素；
         */


        .box1,
        .box2,
        .box3 {
            /* float: left; */
            /* font-size: 50px; */
            line-height: 100%;
        }

        .box1 {
            /* float: left; */
            width: 250px;
            height: 250px;
            background-color: #bfa;
            /* border: 10px solid red; */
            /* padding: 10px; */
            /* overflow: hidden; */
            /* margin: 100px auto; */
        }

        .box2 {
            width: 150px;
            height: 150px;
            background-color: rgb(32, 51, 194);
            /* border: 10px solid red; */
            /* padding: 10px; */
            /* margin: 50px 0px; */
            margin-top: 100px;
            /* float: left; */
            /* float: left; */
            /* clear: left; */

        }

        .box3 {
            width: 150px;
            height: 150px;
            background-color: rgb(242, 118, 30);
            /* border: 10px solid red; */
            padding: 10px;
            clear: both;
            /* float: left; */
        }
        /* .box33 {
            clear: both;
        } */
        /* 用css添加box33 伪元素是行内元素要转换成块元素*/
        .box1::after{
            content: "";
            display: block;
            clear: both;
            
        }
        /* 用before伪元素解决外边距重叠问题 */
        .box1::before{
            content: "";
            display: table;
        }

        span {
            background-color: rgb(237, 42, 42);
            width: 100px;
            height: 100px;
            float: left;
        }


        .nav {
            width: 200px;
            height: 36px;
            background-color: rgb(238, 226, 226);
        }

        li {
            float: left;
        }

        a {
            padding: 10px 15px;
            display: block;
            line-height: 100%;
        }

        ul li:last-child a {
            width: 12px;
        }

        a:hover {
            background-color: rgb(176, 169, 169);
        }






        .box5 {
            border: 10px solid red;
            /* display: inline-block; */
            /* overflow: auto; */
            /* float: left;  让父元素也浮动，不过有副作用；*/
        }

        .box6 {
            width: 100px;
            height: 100px;
            background-color: rgb(33, 176, 23);
            float: left;
        }

        /* 使用after伪元素解决高度塌陷
            ::before伪元素解决外边距重叠问题
        */
        .clearfix::after,
        .clearfix::before {
            content: "";
            /* float: left; 应该是 display: table; 因为table可以让before元素没有内容但是隔断*/
            display: table;
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2">2</div>
        <!-- <div class="box33"></div> -->
    </div>

    <!-- <div class="box3">3</div> -->
    <!-- <div class="box4">eee</div> -->
    <!-- <span>i am a span </span> -->

    <!-- 导航条 -->
    <!-- <ul class="nav">
        <li><a href="#">a</a></li>
        <li><a href="#">b</a></li>
        <li><a href="#">c</a></li>
        <li><a href="#">d</a></li>
        <li><a href="#">e</a></li>
    </ul> -->

    <!-- <div class="box5">
        <div class="box6"></div>
    </div> -->

    <!-- <div class="box7"></div>
    <div class="box8"></div>
    <div class="box9"></div> -->


</body>

</html>